<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./fonts/icon-font.css" />
  <script src="./js/flexable.js"></script>
  <style>
    .page-body {
      padding: .5rem .3rem;
    }

    .page-body .page-body-header {
      margin-bottom: .3rem;
    }

    .page-body .page-body-header div:first-child {
      color: #191919;
      font-size: .27rem;
    }

    .page-body .page-body-header div:last-child {
      margin-top: .1rem;
      color: #b3b3b3;
      font-size: .14rem;
    }

    .login-form .login-form-item {
      display: flex;
      /* padding: .09rem; */
      border-bottom: 1px solid #f3f1f2;
      margin-bottom: .16rem;
      height: .52rem;
      align-items: center;
      position: relative;
      padding-bottom: .1rem;
    }

    .login-form .login-form-item input {
      font-size: .15rem;
    }

    .login-form .login-form-item span {
      font-size: .14rem;
      color: red;
      position: absolute;
      left: 0;
      top: .3rem;
      /* display: none; */
    }

    .get-code {
      /* display: inline-block; */
      font-size: .14rem;
      color: #cea26a;
      min-width: 1.2rem;
      text-align: center;
      line-height: .52rem;
    }

    .login-btn {
      width: 100%;
      height: .43rem;
      margin-top: .4rem;
      background: linear-gradient(90deg, #ecb53c, #ff9211);
      color: #fff;
      border-radius: .4rem;
      box-shadow: 0 .1rem .2rem 0 rgba(0, 0, 0, .1);
      letter-spacing: .02rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .login-btn a {
      color: #fff;
      font-size: .14rem;
    }
  </style>
</head>

<body>
  <div class="page-header">
    <div class="go-back">
      <a href="javascript:;">
        <i class="iconfont icon-back_light"></i>
      </a>
    </div>
    <div class="page-title">会员登录</div>
  </div>
  <div class="page-body">
    <div class="page-body-header">
      <div>手机号登录</div>
      <div>未注册的手机号登录后将自动注册</div>
    </div>
    <div class="login-form">
      <div class="login-form-item">
        <input type="text" placeholder="请输入手机号码" class="phoneIpt">
        <span class="msg"></span>
      </div>
      <div class="login-form-item login-form-item_Vcode">
        <input type="text" placeholder="请输入图形验证码" class="verifyIpt">
        <div class="Vcode" id="Vcode" style="width: 1.5rem; height: .32rem;"></div>
        <span class="msg"></span>
      </div>
      <div class="login-form-item login-form-item_getCode">
        <input type="text" placeholder="请输入短信验证码" class="codeIpt">
        <a href="javascript:;" class="get-code">获取验证码</a>
        <span class="msg"></span>
      </div>
      <div class="login-btn">
        <a href="javascript:;">登录</a>
      </div>
    </div>
  </div>

</body>

</html>